<template>
    <div class="tiku-box">
        <div class="ku" v-for="(item,index) in tiku" :key="index">
             <!-- <img src="../assets/img/4.jpg" alt=""> -->
            <img :src='require("./../../assets/ypt/img/"+item.img+".jpg")' >
            <div class="lian">
                <p>{{item.jianjie}}</p>
                <div class="zhuan">
                <span>{{item.dian}} </span>
                <span> {{item.lian}}</span>
                </div>
            </div>
        </div>

        <!-- <div class="ku">
            <img src="../assets/img/5.jpg" alt="">
            <div class="lian">
                <p>六级阅读真题专练</p>
                <div class="zhuan">
                <span>共19个知识点 </span>
                <span>4.3万人在练</span>
                </div>
            </div>
        </div>

        <div class="ku">
            <img src="../assets/img/6.jpg" alt="">
            <div class="lian">
                <p>记忆练习室</p>
                <div class="zhuan">
                <span>共5个知识点 </span>
                <span> 760人在练</span>
                </div>
            </div>
        </div>

       <div class="ku">
            <img src="../assets/img/7.jpg" alt="">
            <div class="lian">
                <p>计算机二级Ms office</p>
                <div class="zhuan">
                <span>共16个知识点 </span>
                <span> 12.6万人在练</span>
                </div>
            </div>
        </div>

        <div class="ku">
            <img src="../assets/img/7.jpg" alt="">
            <div class="lian">
                <p>计算机二级《十套选择密卷》</p>
                <div class="zhuan">
                <span>共11个知识点 </span>
                <span> 2.6万人在练</span>
                </div>
            </div>
        </div>

        <div class="ku">
            <img src="../assets/img/7.jpg" alt="">
            <div class="lian">
                <p>计算机二级Python</p>
                <div class="zhuan">
                <span>共13个知识点 </span>
                <span> 9879人在练</span>
                </div>
            </div>
        </div> -->

    </div>
</template>

<script>
import axios from "axios";
export default {
    name:"Tiku",
  data() {
    return {
        tiku:[]
    };
  },
   created(){

      axios({
          url:"http://localhost:3000/tiku",
          method:"get",

      })
      .then(res=>{
          this.tiku = res.data;
      })
    }
};
</script>


<style>
.tiku-box{
    padding-top: .2rem;
    display: flex;
    flex-direction: column;
}
.ku{
    height: 1.4rem;
    display: flex;

}
.ku img{
    width: 1rem;
    
    height: 1.4rem;
}
.ku .lian{
    padding-left: .3rem;
}
.ku .lian p{
    height: 0.8rem;
    font-size: .2rem;
    font-weight: 600;
    line-height: 0.8rem;
}
.lian .zhuan{
    
    color: #a3a3a3;
    
    
    display: flex;

}
.lian .zhuan span:nth-child(2){
    padding-left: .15rem;
    border-left: 1px solid #a3a3a3;
    margin-left: .15rem;
}
</style>